<!DOCTYPE html>
<html>
  
<!-- Mirrored from www.dba.cn/book/electron/ELECTRONJiaoCheng/ELECTRONShiYongSELENIUMHeWEBDRIVER.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 20 Mar 2022 10:24:06 GMT -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Electron 使用 Selenium 和 WebDriver - Electron中文手册</title>
    <link rel="stylesheet" type="text/css" href="../../skins/cms/css/min-easyui.css">
    <link rel="stylesheet" type="text/css" href="../../skins/cms/css/book.css">
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../skins/cms/js/m-easyui.js"></script>
    <script type="text/javascript" src="../../skins/cms/js/prettify.js"></script>
  </head>
  <body class="easyui-layout" style="text-align:left">
    <div region="north" border="false" class="group wrap header" style="height:66px;font-size:100%">
      <div class="header">
        <div class="navigation-toggle" data-tools="navigation-toggle" data-target="#navbar-1">
          <span>Electron中文手册</span>
        </div>
        <div id="elogo" class="navbar navbar-left">
          <ul>
            <li>
              <h1><a href="../index.html">Electron中文手册</a></h1>
            </li>
          </ul>
        </div>
      <div style="clear:both"></div>
    </div>
   </div>
    <div region="west" split="true" data-options="collapsedSize:0,hideExpandTool:true" title="文档目录" style="width:20%;min-width:300px;padding:5px;display:none;">
        
      <ul class="easyui-tree"> 
        <li iconcls="icon-base"><span>Electron 教程</span><ul><li iconcls="icon-gears"><a href="ELECTRONJiaoChengJianJie.html">Electron 教程简介</a></li><li iconcls="icon-gears"><a  href="ELECTRONKuaiSuRuMen.html">Electron 快速入门</a></li><li iconcls="icon-gears"><a  href="ELECTRONZhuoMianHuanJingJiCheng.html">Electron 桌面环境集成</a></li><li iconcls="icon-gears"><a  href="ELECTRONZaiXianLiXianShiJianTanCe.html">Electron 在线/离线事件探测</a></li><li iconcls="icon-gears"><a  href="ELECTRONJinCheng.html">Electron 进程</a></li><li iconcls="icon-gears"><a  href="ELECTRONZhiChiDeCHROMEMingLingXingKaiGuan.html">Electron 支持的 Chrome 命令行开关</a></li><li iconcls="icon-gears"><a  href="ELECTRONHuanJingBianLiang.html">Electron 环境变量</a></li><li iconcls="icon-gears"><a  href="ELECTRONZhiChiDePingTai.html">Electron 支持的平台</a></li><li iconcls="icon-gears"><a  href="ELECTRONYingYongBuShu.html">Electron 应用部署</a></li><li iconcls="icon-gears"><a  href="ELECTRONXiangMACAPPSTOREYingYongTiJiaoXiangDao.html">Electron 向Mac App Store 应用提交向导</a></li><li iconcls="icon-gears"><a  href="ELECTRONYingYongDaBao.html">Electron 应用打包</a></li><li iconcls="icon-gears"><a  href="ELECTRONShiYongYuanShengMoKuai.html">Electron 使用原生模块</a></li><li iconcls="icon-gears"><a  href="ELECTRONZhuJinChengDiaoShi.html">Electron 主进程调试</a></li><li iconcls="icon-gears"><a  href="ELECTRONShiYongSELENIUMHeWEBDRIVER.html">Electron 使用 Selenium 和 WebDriver</a></li><li iconcls="icon-gears"><a  href="ELECTRONDEVTOOLSKuoZhan.html">Electron DevTools扩展</a></li><li iconcls="icon-gears"><a  href="ELECTRONShiYongPEPPERFLASHChaJian.html">Electron 使用 Pepper Flash 插件</a></li><li iconcls="icon-gears"><a  href="ELECTRONShiYongWIDEVINECDMChaJian.html">Electron 使用 Widevine CDM 插件</a></li><li iconcls="icon-gears"><a  href="ELECTRONShuYuBiao.html">Electron 术语表</a></li><li iconcls="icon-gears"><a  href="ELECTRONLiPingRan.html">Electron 离屏渲染</a></li><li iconcls="icon-gears"><a  href="ELECTRONJiaoHuShiJieShiQiREPL.html">Electron 交互式解释器 (REPL)</a></li></ul></li><li iconcls="icon-base"><span>Electron API</span><ul><li iconcls="icon-gears"><a  href="../ELECTRONAPI/ELECTRONDOMFILEDuiXiang.html">Electron DOM File对象</a></li><li iconcls="icon-gears"><a  href="../ELECTRONAPI/ELECTRONDOMWEBVIEWBiaoQian.html">Electron DOM <webview> 标签</a></li><li iconcls="icon-gears"><a  href="../ELECTRONAPI/ELECTRONWINDOWOPENHanShu.html">Electron window.open 函数</a></li></ul></li><li iconcls="icon-base"><span>在主进程内可用的模块</span><ul><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONAPPMoKuai.html">Electron app 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONAUTOUPDATERMoKuai.html">Electron autoUpdater 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONBROWSERWINDOWMoKuai.html">Electron BrowserWindow 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONCONTENTTRACINGMoKuai.html">Electron contentTracing 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONDIALOGMoKuai.html">Electron dialog 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONGLOBAL-SHORTCUTMoKuai.html">Electron global-shortcut 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONIPCMAINMoKuai.html">Electron ipcMain 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONMENUMoKuai.html">Electron menu 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONMENUITEMMoKuai.html">Electron MenuItem 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONPOWERMONITORMoKuai.html">Electron powerMonitor 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONPOWERSAVEBLOCKERMoKuai.html">Electron powerSaveBlocker 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONPROTOCOLMoKuai.html">Electron protocol 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONSESSIONMoKuai.html">Electron session 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONWEBCONTENTSMoKuai.html">Electron webContents 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONTRAYMoKuai.html">Electron Tray 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONLOCALES.html">Electron Locales</a></li></ul></li><li iconcls="icon-base"><span>在渲染进程（网页）内可用的模块</span><ul><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONDESKTOPCAPTURERMoKuai.html">Electron desktopCapturer 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONIPCRENDERERMoKuai.html">Electron ipcRenderer 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONREMOTEMoKuai.html">Electron remote 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONWEBFRAMEMoKuai.html">Electron webFrame 模块</a></li></ul></li><li iconcls="icon-base"><span>两种进程都可用的模块</span><ul><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONCLIPBOARDMoKuai.html">Electron clipboard 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONCRASHREPORTERMoKuai.html">Electron crashReporter 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONNATIVEIMAGEMoKuai.html">Electron nativeImage 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONSCREENMoKuai.html">Electron screen 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONSHELLMoKuai.html">Electron shell 模块</a></li></ul></li><li iconcls="icon-base"><span>Electron 开发</span><ul><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONBianMaGuiFan.html">Electron 编码规范</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONYuanMaMuLuJieGou.html">Electron 源码目录结构</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONHeNWJSYuanMingNODE-WEBKITZaiJiShuShangDeChaYi.html">Electron 和 NW.js (原名 node-webkit) 在技术上的差异</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONGouJianXiTongGaiLan.html">Electron 构建系统概览</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONGouJianBuZhouOSX.html">Electron 构建步骤 (OS X)</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONGouJianBuZhouWINDOWS.html">Electron 构建步骤 (Windows)</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONGouJianBuZhouLINUX.html">Electron 构建步骤 (Linux)</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONZaiDiaoShiZhongShiYongSYMBOLSERVER.html">Electron 在调试中使用 Symbol Server</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONChangJianWenTi.html">Electron 常见问题</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONBanBenGuanLi.html">Electron 版本管理</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONWINDOWTiJiaoZhiNan.html">electron window 提交指南</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ZiDongHuaChiXuJiChengXiTongCICeShi.html">自动化持续集成系统（CI）测试</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONWenDangFengGeZhiNan.html">Electron 文档风格指南</a></li></ul></li>
      </ul>
    
    </div>
    <div region="center">
      <div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
        <div title="Electron 使用 Selenium 和 WebDriver - Electron中文手册">  
            <div class="book-content">
              
      <div style="padding:8px;"> &gt; <a href="../index.html">Electron中文手册</a> &gt; Electron 使用 Selenium 和 WebDriver</div>
      <div class="content"><p class="comments-section">引自<a href="../../chromedev/index.html">chrome</a>Driver - WebDriver for Chrome:</p>
<blockquote><p class="comments-section">WebDriver 是一款开源的支持多浏览器的自动化测试工具。它提供了操作网页、用户输入、JavaScript 执行等能力。ChromeDriver 是一个实现了 WebDriver 与 Chr<a href="../../omi/index.html">omi</a>um 联接协议的独立服务。它也是由开发了 Chromium 和 WebDriver 的团队开发的。</p></blockquote>
<p class="comments-section">为了能够使 <code>chromedriver</code> 和 Electron 一起正常工作，我们需要告诉它 Electron 在哪，并且让它相信 Electron 就是 Chrome 浏览器。</p>
<h2 id="通过-webdriverjs-配置">通过 WebDriverJs 配置</h2>
<p class="comments-section">WebDriverJs 是一个可以配合 WebDriver 做测试的 node 模块，我们会用它来做个演示。</p>
<h3 id="1-启动-chromedriver">1. 启动 ChromeDriver</h3>
<p class="comments-section">首先，你要下载 <code>chromedriver</code>，然后运行以下命令：</p>
<pre><code class="lang-bash">$ ./chromedriver
Starting ChromeDriver (v2.<span class="hljs-number">10.291558</span>) on port <span class="hljs-number">9515</span>
Only <span class="hljs-built_in">local</span> connections are allowed.
</code></pre>
<p class="comments-section">记住 <code>9515</code> 这个端口号，我们后面会用到</p>
<h3 id="2-安装-webdriverjs">2. 安装 WebDriverJS</h3>
<pre><code class="lang-bash">$ npm install selenium-webdriver
</code></pre>
<h3 id="3-联接到-chromedriver">3. 联接到 ChromeDriver</h3>
<p class="comments-section">在 Electron 下使用 <code>selenium-webdriver</code> 和其平时的用法并没有大的差异，只是你需要手动设置连接 ChromeDriver，以及 Electron 的路径：</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> webdriver = <span class="hljs-built_in">require</span>(<span class="hljs-string">'selenium-webdriver'</span>);

<span class="hljs-keyword">var</span> driver = <span class="hljs-keyword">new</span> webdriver.Builder()
  <span class="hljs-comment">// "9515" 是ChromeDriver使用的端口</span>
  .usingServer(<span class="hljs-string">'http://localhost:9515'</span>)
  .withCapabilities({
    chromeOptions: {
      <span class="hljs-comment">// 这里设置Electron的路径</span>
      binary: <span class="hljs-string">'/Path-to-Your-App.app/Contents/MacOS/<a href="../../atom/index.html">atom</a>'</span>,
    }
  })
  .forBrowser(<span class="hljs-string">'electron'</span>)
  .build();

driver.get(<span class="hljs-string">'http://www.google.com'</span>);
driver.findElement(webdriver.By.name(<span class="hljs-string">'q'</span>)).sendKeys(<span class="hljs-string">'webdriver'</span>);
driver.findElement(webdriver.By.name(<span class="hljs-string">'btnG'</span>)).click();
driver.wait(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
 <span class="hljs-keyword">return</span> driver.getTitle().then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">title</span>) </span>{
   <span class="hljs-keyword">return</span> title === <span class="hljs-string">'webdriver - Google Search'</span>;
 });
}, <span class="hljs-number">1000</span>);

driver.quit();
</code></pre>
<h2 id="通过-webdriverio-配置">通过 WebdriverIO 配置</h2>
<p class="comments-section">WebdriverIO 也是一个配合 WebDriver 用来测试的 node 模块</p>
<h3 id="1-启动-chromedriver">1. 启动 ChromeDriver</h3>
<p class="comments-section">首先，下载 <code>chromedriver</code>，然后运行以下命令：</p>
<pre><code class="lang-bash">$ chromedriver --url-base=wd/hub --port=<span class="hljs-number">9515</span>
Starting ChromeDriver (v2.<span class="hljs-number">10.291558</span>) on port <span class="hljs-number">9515</span>
Only <span class="hljs-built_in">local</span> connections are allowed.
</code></pre>
<p class="comments-section">记住 <code>9515</code> 端口，后面会用到</p>
<h3 id="2-安装-webdriverio">2. 安装 WebdriverIO</h3>
<pre><code class="lang-bash">$ npm install webdriverio
</code></pre>
<h3 id="3-连接到-chromedriver">3. 连接到 ChromeDriver</h3>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> webdriverio = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webdriverio'</span>);
<span class="hljs-keyword">var</span> options = {
    host: <span class="hljs-string">"localhost"</span>, <span class="hljs-comment">// 使用localhost作为ChromeDriver服务器</span>
    port: <span class="hljs-number">9515</span>,        <span class="hljs-comment">// "9515"是ChromeDriver使用的端口</span>
    desiredCapabilities: {
        browserName: <span class="hljs-string">'chrome'</span>,
        chromeOptions: {
          binary: <span class="hljs-string">'/Path-to-Your-App/electron'</span>, <span class="hljs-comment">// Electron的路径</span>
          args: [<span class="hljs-comment">/* cli arguments */</span>]           <span class="hljs-comment">// 可选参数，类似：'app=' + /path/to/your/app/</span>
        }
    }
};

<span class="hljs-keyword">var</span> client = webdriverio.remote(options);

client
    .init()
    .url(<span class="hljs-string">'http://google.com'</span>)
    .setValue(<span class="hljs-string">'#q'</span>, <span class="hljs-string">'webdriverio'</span>)
    .click(<span class="hljs-string">'#btnG'</span>)
    .getTitle().then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">title</span>) </span>{
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Title was: '</span> + title);
    })
    .end();
</code></pre>
<h2 id="工作流程">工作流程</h2>
<p class="comments-section">无需重新编译 Electron，只要把 app 的源码放到 <a href="ELECTRONDeZiYuanMuLu.html">Electron的资源目录</a> 里就可直接开始测试了。</p>当然，你也可以在运行 Electron 时传入参数指定你 app 的所在文件夹。这步可以免去你拷贝－粘贴你的 app 到 Electron 的资源目录。</div>
      <div class="prev-next" style="padding:8px;">上一篇：<a class="prev" href="ELECTRONZhuJinChengDiaoShi.html">Electron 主进程调试</a><br>下一篇：<a class="prev" href="ELECTRONDEVTOOLSKuoZhan.html">Electron DevTools扩展</a><br></div>
    
            </div>
        </div> 
      </div>
    </div>
  </body>

<!-- Mirrored from www.dba.cn/book/electron/ELECTRONJiaoCheng/ELECTRONShiYongSELENIUMHeWEBDRIVER.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 20 Mar 2022 10:24:07 GMT -->
</html>